<template>
  <view class="login">
    <uni-nav-bar dark color="#fff" backgroundColor="#323232" background-color="#007AFF" status-bar
      left-icon="left" title="登录" @clickLeft="back" />
    <view class="login_top">
      <image class="login_top_icon" src="../../static/login/login_icon.png" mode=""></image>
      <image class="login_top_circle" src="../../static/login/login_circle.png" mode=""></image>
    </view>
    <view class="input_box u-flex u-ali-center" style="margin: 160rpx auto 0;">
      <image class="input_icon" src="../../static/login/name.png" mode=""></image>
      <!-- <input class="input_in" type="text" v-model="phone" placeholder="请输入手机号"> -->
      <combox-search label="" labelWidth="100px" emptyTips="" :candidates="candidates2" placeholder="请选择手机号" @getValue="getValue($event,'common')"  v-model="phone"></combox-search>
      <!-- <image class="input_icon2" src="../../static/login/jiao.png" mode=""></image> -->
    </view>
    <view class="input_box u-flex u-ali-center" style="margin: 28rpx auto 0;">
      <image class="input_icon" src="../../static/login/pass.png" mode=""></image>
      <input class="input_in" type="password" v-model="password" placeholder="请输入密码">
      <!-- <image class="input_icon2" src="../../static/login/jiao.png" mode=""></image> -->
    </view>
    <view class="input_button" @click="login">
      登录
    </view>
    <view class="bottom_text u-flex u-ju-between">
      <span @click="$ui.push('/pages/login/regiter')">免费注册</span>
      <span @click="$ui.push('/pages/login/setpass')">忘记密码</span>
    </view>
  </view>
</template>

<script>
  import { login } from '../../api/user.js'
  import md5 from '../../utils/md5.js'
	import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue"
	import uniSection from "@/components/uni-section.vue"
  export default {
    components: {
    	comboxSearch,
    	uniSection
    },
    data() {
      return {
        phone: '',
        password: '',
        candidates2:[]
      }
    },
    methods: {
      async login() {
        try{
          console.log('phone=', this.phone)
          console.log('password=', this.password)
          if(this.phone === '' || this.password === '') return this.$ui.toast('请填写必填项')
          const { code, data, msg } = await login({phone: this.phone, password: md5.hex_md5(this.password)})
          if (code === 1) {
            this.$ui.setStorage('token', data['token'])
            this.$ui.setStorage('userInfo', data)
            this.$ui.toast('登录成功')
            // 
            if(this.$ui.getmorePhone('phoneArr')){
              const arr1 = this.$ui.getmorePhone('phoneArr')
              if(arr1.includes(this.phone)){
                 console.log('111',arr1)
              }else{
                arr1.push(this.phone)
                this.$ui.setmorePhone('phoneArr',arr1)
                console.log('222',arr1)
              }
            }else{
              console.log('不存在')
              const arr2 = []
              arr2.push(this.phone)
              this.$ui.setmorePhone('phoneArr',arr2)
            }
            // arr.push(this.phone)
            // this.$ui.setmorePhone('phoneArr',arr)
            setTimeout(() => this.$ui.push('/pages/home/home', 'reLaunch'), 200)
            // if (vm.rememberChecked) {
            //   vm.$cookie.set('checkedLY', vm.rememberChecked)
            //   let arr = []
            //   arr = JSON.parse(vm.$cookie.get('accountListSJZX')) || []
            //   if (arr.indexOf(values.phone) != -1) {
            //     arr.splice(arr.indexOf(values.phone), 1)
            //   }
            //   arr.splice(0, 0, values.phone)
            //   vm.$cookie.set('accountListSJZX', JSON.stringify(arr))
            // }
            // vm.$cookie.set(values.phone, vm.$AES.encrypt(vm.password))
            // vm.$cookie.set('tokenSJZX', res.data.token)
            // vm.$cookie.set('userInfoSJZX', JSON.stringify(res.data))
            // vm.$store.state.showNotice = true
            // setTimeout(function () {
            //   vm.$router.replace('/')
            // }, 1000)
          } else {
            this.$ui.toast(msg)
            // this.loading = false
            // if (res.msg == '密码不正确') {
            //   this.isShowPwdToast = true
            // } else if (res.msg == '账号不正确') {
            //   this.isShowAcToast = true
            // }
          }
        }catch(e){
          //TODO handle the exception
          console.log(e);
        }
      },
      getValue(e,type){
        // console.log('e=',e)
        // console.log('type',type)
      	switch (type){
      		case 'json':
      			this.index=e;
      			break;
      		case 'common':
      			this.phone=e;
      			break;
      		case 'common2':
      			this.city2=e;
      			break;
      		case 'common3':
      			this.city3=e;
      			break;
      		default:
      			break;
      	}
      	console.log(e);
      },
      back() {
        uni.navigateBack()
      }
    },
    onLoad() {
      // this.$ui.setStorage('token', 'istoken')
      // this.$ui.push('/pages/home/home', 'reLaunch')
      console.log('onLoad')
      this.candidates2 = this.$ui.getmorePhone('phoneArr')
      console.log('this.candidates2==',this.candidates2)
    }
  }
</script>
<style lang="scss">
  /deep/ .uni-combox__input {
      /* flex: 1; !important;
      font-size: 16px; !important;
      height: 22px; !important;
      line-height: 22px; !important; */
      margin-right: 95px;
  }
  /deep/ uni-icon{
    display:none
  }
</style>
<style lang="less">
  .login {
    .login_top {
      position: relative;
      top: 78rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 469rpx;
      height: 475rpx;

      .login_top_icon {
        position: absolute;
        top: 154rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 140rpx;
        height: 168rpx;
      }

      .login_top_circle {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        width: 469rpx;
        height: 475rpx;
        animation: move 20s linear infinite;
      }
    }

    .input_box {
      position: relative;
      background: #FFFFFF;

      .input_icon {
        margin-left: 16rpx;
        margin-right: 23rpx;
        width: 23rpx;
        height: 26rpx;
      }

      .input_icon2 {
        position: absolute;
        right: 30rpx;
        width: 23rpx;
        height: 14rpx;
      }

      .input_in {
        border: none;
      }
    }

    .input_button {
      margin: 53rpx auto;
      width: 590rpx;
      height: 80rpx;
      background: linear-gradient(45deg, #CFB05D 13%, #C99838 100%);
      border-radius: 4rpx;
      font-size: 30rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
    }

    .bottom_text {
      margin: 53rpx auto;
      width: 590rpx;
      height: 80rpx;

      span {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }
  }

  @keyframes identifier {}

  @keyframes move {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(360deg);
    }
  }
</style>
